<template>
	<view class="padding-bottom-xl">
		<view class="head">
			<u-navbar title="权益基金" :autoBack="true" :placeholder="true" leftIconColor="#ffffff"
				:titleStyle="{color: '#ffffff', 'font-weight': 'bold'}" :bgColor="scrollTop > 0 ? '#e00000' : 'transparent'">
				<view class="u-nav-slot font-15 text-bold color-w" slot="right" @click="toRecord">往期发放记录</view>
			</u-navbar>
			<view class="margin">
				<u-tabs :list="list" lineWidth="40" lineColor="#FFFFFF" :itemStyle="{width: '100%', height: '88rpx'}" :activeStyle="{color: '#FFFFFF', 'font-weight': 'bold'}" :inactiveStyle="{color: '#6B0C00', 'font-weight': 'bold'}" :is-scroll="false" :current="current" @change="handelTab"></u-tabs>
			</view>
			<view class="top-box">
				3个月进行一次发放
				<!-- {{poolInfo && poolInfo.prizePool && poolInfo.prizePool.activityTime}} -->
			</view>
			<view class="pr font-13">
				<view class="main-top">
					<view class="title font-14 padding-tb red">基金池</view>
					<view class="flex justify-center">
						<view class="flex text-center w-100 margin-lr-xl">
							<view class="flex-sub">
								<view class="font-24 text-bold color-r">{{((poolInfo && poolInfo.prizePool && poolInfo.prizePool.money || 0)*(poolInfo && poolInfo.config && poolInfo.config[0].money || 0)).toFixed(2) || 0}}</view>
								<view class="margin-top-xs red">预消费</view>
							</view>
							<view class="flex-sub" style="border-left: 1rpx solid #f5e3df;">
								<view class="font-24 text-bold color-r">{{((poolInfo && poolInfo.prizePool && poolInfo.prizePool.money || 0)*(poolInfo && poolInfo.config && poolInfo.config[1].money || 0)).toFixed(2) || 0}}</view>
								<view class="margin-top-xs red">贡献值</view>
							</view>
						</view>
					</view>
					
					<view class="people margin-top">当前<text class="text-theme">{{poolInfo && poolInfo.teams && poolInfo.teams.length || 0}}</text>人参与</view>
				</view>
			</view>
		</view>
		
		<view class="rank-box">
			<view class="flex align-center rank-item" style="margin: 40rpx 30rpx" v-if="rankInfo && rankInfo.userId">
				<view class="myself">我</view>
				<view class="flex align-center justify-center" style="width: 17%;">
					<text class="font-15 text-bold text-theme">{{rankInfo.ranking}}</text>
				</view>
				<view class="flex align-center" style="width: 23%;">
					<view>
						<view class="font-13 text-cut text-bold" style="width: 180rpx;">{{rankInfo.nickName}}</view>
						<view class="font-11 text-cut" style="width: 180rpx">ID：{{rankInfo.userId}}</view>
					</view>
				</view>
				<view class="font-13 text-center text-bold flex-sub" style="width: 20%;">{{rankInfo.monetaryRatio}}%</view>
				<view class="font-13 text-center text-bold flex-sub" style="width: 20%;">{{(rankInfo.shareProfit *( poolInfo && poolInfo.config && poolInfo.config[0].money) || 0).toFixed(2) || 0}}</view>
				<view class="font-13 text-center text-bold flex-sub">{{(rankInfo.shareProfit *( poolInfo && poolInfo.config && poolInfo.config[1].money) || 0).toFixed(2) || 0}}</view>
			</view>
			<view class="flex text-center padding-lr-sm list-title" style="margin-top: 40rpx;">
				<view style="width: 17%;">排名</view>
				<view style="width: 23%;">用户信息</view>
				<view class="flex-sub">业绩占比</view>
				<view class="flex-sub">预消费</view>
				<view class="flex-sub">贡献值</view>
			</view>
			<view class="flex align-center rank-item" v-for="(item, index) in rankList" :key="index">
				<view class="myself" v-if="userInfo.userId == item.userId">我</view>
				<view class="flex align-center justify-center" style="width: 17%;">
					<image src="/static/my/pool/rank1.png" class="img-64"
						v-if="index ==0"></image>
					<image src="/static/my/pool/rank2.png" class="img-64"
						v-if="index == 1"></image>
					<image src="/static/my/pool/rank3.png" class="img-64"
						v-if="index ==2"></image>
					<text class="font-16 text-bold text-theme"
						v-if="index > 2">{{item.ranking}}</text>
				</view>
				<view class="flex align-center" style="width: 23%;">
					<view>
						<view class="font-13 text-cut text-bold" style="width: 180rpx;">{{item.nickName}}</view>
						<view class="font-11 text-cut" style="width: 180rpx">ID：{{item.userId}}</view>
					</view>
				</view>
				<view class="font-13 text-center text-bold flex-sub">{{item.monetaryRatio}}%</view>
				<view class="font-13 text-center text-bold flex-sub">{{(item.shareProfit *( poolInfo && poolInfo.config && poolInfo.config[0].money) || 0).toFixed(2) || 0}}</view>
				<view class="font-13 text-center text-bold flex-sub">{{(item.shareProfit *( poolInfo && poolInfo.config && poolInfo.config[1].money) || 0).toFixed(2) || 0}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		prizePool
	} from '@/common/api/customer.js'
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#E60000',
				},
				list: [
					{
						name: '服务商权益基金',
						type: ''
					}, 
					// {
					// 	name: '充值权益基金',
					// 	type: 1
					// }
				],
				rankList: [],
				rankInfo: {},
				scrollTop: 0,
				current: 0,
				productArea: 3,
				poolInfo: {}
			};
		},
		computed: {
			...mapState('user', ['userInfo'])
		},
		onLoad() {
			this.getPrizePoolInfo()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		methods: {
			resetData() {
				this.poolInfo = {}
				this.rankList = []
				this.rankInfo = {}
			},
			handelTab(e) {
				this.current = e.index
				this.resetData()
				if(this.current == 0) {
					this.productArea = 3
				}
				if(this.current == 1) {
					this.productArea = 6
				}
				this.getPrizePoolInfo()
			},
			getPrizePoolInfo() {
				uni.showLoading({
					title: '加载中',
				})
				prizePool({productArea: this.productArea}).then(res => {
					uni.hideLoading()
					this.poolInfo = res.data || {}
					if(this.poolInfo && this.poolInfo.teams) {
						this.rankList = this.poolInfo.teams || []
					}
					if(this.poolInfo && this.poolInfo.user) {
						this.rankInfo = this.poolInfo.user || {}
					}
				}).catch(err => {
					uni.hideLoading()
				})
			},
			toRecord() {
				uni.navigateTo({
					url: '/pages/my/dividendPool/dividendRecord'
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F73A15;
	}
</style>
<style lang="scss" scoped>
	.head {
		// background: linear-gradient(to right bottom, #E60000 0%, #B80000 100%);
		background-image: url('/static/my/pool/pool-bg.png');
		background-size: 100% 100%;
	}

	.top-box {
		width: 550rpx;
		height: 58rpx;
		background: rgba(136, 4, 0, 0.69);
		border-radius: 29rpx;
		font-size: 28rpx;
		color: #ffffff;
		margin: 40rpx auto 20rpx auto;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.main-top {
		height: 312rpx;
		border-radius: 15rpx;
		background-image: url('/static/my/pool/pool-bg1.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		margin: 0 auto;
		text-align: center;
	
		.title {
			color: #550A00;
		}
	
		.people {
			color: #97000B;
			font-size: 32rpx;
		}
		.red{
			color: #97000B;
		}
	}
	
	.rank-box {
		.list-title {
			color: #ffffff;
			font-size: 26rpx;
			//font-weight: bold;
		}
	
		.rank-item {
			margin: 20rpx 30rpx 0 30rpx;
			height: 102rpx;
			background-image: url('/static/my/pool/rank-bg.png');
			background-size: 100% 100%;
			border-radius: 16rpx;
			position: relative;
			color: #000;
	
			.avatar {
				width: 77rpx;
				height: 77rpx;
				border-radius: 50%;
			}
	
			.myself {
				position: absolute;
				top: 0;
				left: 0;
				width: 64rpx;
				height: 30rpx;
				background: #e60000;
				border-radius: 16rpx 0 16rpx 0;
				font-size: 22rpx;
				color: #ffffff;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>